<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>混合 - 继承</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="Application">
      <xxx-com></xxx-com>
    </div>
  </body>

  <script>
    const App= Vue.createApp({})
    const myMixin = {
        data(){
            return {
                a:"a",
                b:"b",
                c:"c"
            }
        },
        /** 重名的生命周期内的函数会先 Mixin中的实现，再触发组件内的实现 ***/
        created(){
            console.log("minix")
            console.log(this.$data)
        }
    }
    const com = {
        mixins : [myMixin],
        data(){
            return {
                c :"C", //override
                d :"d"  //extension
            }
        },
        created(){
            console.log("self")
            console.log(this.$data)
        }
    }
    App.component("xxx-com",com)
    //全局混合应该小心使用
    App.mixin({
        mounted(){
            console.log("Global Mixin mounted.")
        }
    })
    App.mount("#Application")
  </script>

</html>